<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Handle Bar</title>
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0"/>
    <link rel="stylesheet" href="static/jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.css"/>
    <link rel="stylesheet" href="static/main.css"/>
    <script src="static/jquery-1.8.3.js"></script>
    <script src="static/jquery.mobile-1.2.0/jquery.mobile-1.2.0.js"></script>
    <script src="static/jquery.validate.js"></script>
    <script src="static/handlebars-1.0.rc.1.js"></script>
</head>
<body>
	<div id="createEntityInstancePage" data-role="page" data-theme="c">
		<div data-role="header">
			<button data-icon="home">Home</button>
			<h1 class="headertext1">Create Entity Instance</h1>
			<button data-icon="arrow-r" data-iconpos="right">Logout</button>
		</div>
		<div data-role="content">
			<div class="topbuttonbar">
				<button data-inline="true" data-icon="check" data-mini="true"
					data-theme="b">Save</button>
				<button data-inline="true" data-icon="delete" data-mini="true">Cancel</button>
			</div>
			<form>
				<div data-role="fieldcontain" id="entityType"></div>
				<div data-role="fieldcontain">
					<label for="entityInstanceName">Entity Instance Name:</label> <input
						type="text" id="entityInstanceName" name="entityInstanceName"
						required="" data-mini="true" />
				</div>
				<div>
					<h3>Properties</h3>
                    <input type="button" id="showPropsButton" data-inline="true" data-mini="true" value="Show Properties"/>
				</div>
				<!--html within this div will be populated on the fly, showing some content here for demo-->
				<div id="propertiesDiv"></div>
			</form>
			<div class="bottombuttonbar">
				<button data-inline="true" data-icon="check" data-mini="true"
					data-theme="b">Save</button>
				<button data-inline="true" data-icon="delete" data-mini="true">Cancel</button>
			</div>
		</div>
		<div data-role="footer">Copyright notice</div>
	</div>

	<script id="entityTypeNameTemplate" type="text/x-handlebars-template">
		<label for="entityTypeName">Entity Type Name:</label>
    	<input type="text" id="entityTypeName" name="entityTypeName" readonly value="{{entityTypeName}}"
                   data-mini="true"/>
	</script>

	<script id="propertyTemplate" type="text/x-handlebars-template">
		{{#each propertyTypes}}
			<div data-role="fieldcontain">
				<label for="{{propertyTypeName}}">{{propertyTypeName}}</label>
				<input type="{{dataType}}" id="{{propertyTypeName}}" name="{{propertyTypeName}}" required data-mini="true"/>
		    </div>
		{{/each}}
	</script>
	<script>
        var context = {
            "entityTypeName":"entitytype1",
            "propertyTypes":[
                {
                    "dataType":"NUMBER",
                    "propertyTypeName":"property1",
                    "mandatory":true
                },
                {
                    "dataType":"text",
                    "propertyTypeName":"property2",
                    "mandatory":true
                },
                {
                    "dataType":"date",
                    "propertyTypeName":"property3",
                    "mandatory":true
                }
            ]
        };

        var entityTypeSource = $("#entityTypeNameTemplate").html();
        var entityTypetemplate = Handlebars.compile(entityTypeSource);
        $("#entityType").html(entityTypetemplate(context));

        var propertysource = $("#propertyTemplate").html();
        var propertytemplate = Handlebars.compile(propertysource);

        $('#showPropsButton').click(function ()
        {
            $("#propertiesDiv").html(propertytemplate(context)).trigger('create');
//            not working yet
            $('#showPropsButton').hide();
        });
    </script>
</body>
</html>